<template>
    <view>
        <!-- 导航 -->
		<view class="nav bg-white">
		    <block v-for="(item, index) in nav_status_list" :key="index">
		        <view v-if="nav_status_index == index" class="item fl tc cr-main" :data-index="index" @tap="nav_event"><text>{{item.name}}</text></view>
		        <view v-else class="item fl tc" :data-index="index" @tap="nav_event">{{item.name}}</view>
		    </block>
		</view>

        <!-- 列表 -->
		<scroll-view :scroll-y="true" class="scroll-box" @scrolltolower="scroll_lower" lower-threshold="30">
		    <view v-if="data_list.length > 0" class="padding-horizontal-main padding-top-main">
		        <view v-for="(item, index) in data_list" :key="index" class="list-item padding-horizontal-main padding-top-main padding-bottom-main border-radius-main bg-white oh spacing-mb">
					<!--别人赠我，我在左侧（箭头左转），我赠别人，我还在左侧（箭头右转）-->
					<block v-if="nav_status_index == 0">
						<view class="box1 fl oh tc">
							<image class="img1" :src="item.user_fromwho.avatar" mode="widthFix"></image>
							<view class="p1 single-text">{{$t('fengcheche.qiandao.userid')}}：{{item.user_fromwho.id}}</view>
							<view v-if="(item.user_fromwho.nickname || null) != null" class="p1 single-text">{{item.user_fromwho.nickname}}</view>
							<view v-else class="p1 single-text">{{item.user_fromwho.username}}</view>
							<view v-if="(item.user_fromwho.mobile_security || null) != null" class="p2 single-text">{{item.user_fromwho.mobile_security}}</view>
						</view>
						<view class="box2 fl oh tc pr">
							<view class="jtbox">
								<view class="jtbox_right"></view>
								<view class="score_line"></view>
								<view class="tc score_num">{{item.num}}{{$t('fengcheche.dazhuanpan.jifen')}}</view>
							</view>
							<view class="tc score_time single-text">{{item.add_time}}</view>
						</view>
						<view class="box3 fr oh tc">
							<image class="img1" :src="item.user_towho.avatar" mode="widthFix"></image>
							<view class="p1 single-text">{{$t('fengcheche.qiandao.userid')}}：{{item.user_towho.id}}</view>
							<view v-if="(item.user_towho.nickname || null) != null" class="p1 single-text">{{item.user_towho.nickname}}</view>
							<view v-else class="p1 single-text">{{item.user_towho.username}}</view>
							<view v-if="(item.user_towho.mobile_security || null) != null" class="p2 single-text">{{item.user_towho.mobile_security}}</view>
						</view>
					</block>
					<block v-else>
						<view class="box1 fl oh tc">
							<image class="img1" :src="item.user_towho.avatar" mode="widthFix"></image>
							<view class="p1 single-text">{{$t('fengcheche.qiandao.userid')}}：{{item.user_towho.id}}</view>
							<view v-if="(item.user_towho.nickname || null) != null" class="p1 single-text">{{item.user_towho.nickname}}</view>
							<view v-else class="p1 single-text">{{item.user_towho.username}}</view>
							<view v-if="(item.user_towho.mobile_security || null) != null" class="p2 single-text">{{item.user_towho.mobile_security}}</view>
						</view>
						<view class="box2 fl oh tc pr">
							<view class="jtbox">
								<view class="jtbox_left"></view>
								<view class="score_line"></view>
								<view class="tc score_num">{{item.num}}{{$t('fengcheche.dazhuanpan.jifen')}}</view>
							</view>
							<view class="tc score_time single-text">{{item.add_time}}</view>
						</view>
						<view class="box3 fr oh tc">
							<image class="img1" :src="item.user_fromwho.avatar" mode="widthFix"></image>
							<view class="p1 single-text">{{$t('fengcheche.qiandao.qiandao')}}：{{item.user_fromwho.id}}</view>
							<view v-if="(item.user_fromwho.nickname || null) != null" class="p1 single-text">{{item.user_fromwho.nickname}}</view>
							<view v-else class="p1 single-text">{{item.user_fromwho.username}}</view>
							<view v-if="(item.user_fromwho.mobile_security || null) != null" class="p2 single-text">{{item.user_fromwho.mobile_security}}</view>
						</view>
					</block>
		        </view>
		    </view>
		    <view v-else>
		        <!-- 提示信息 -->
		        <component-no-data :propStatus="data_list_loding_status"></component-no-data>
		    </view>
		
		    <!-- 结尾 -->
		    <component-bottom-line :propStatus="data_bottom_line_status"></component-bottom-line>
		</scroll-view>
		
		<view class="bottom-fixed padding-main">
		    <button class="bg-main br-main cr-white round text-size" type="default" @tap="url_event" data-value="/pages/fcc/qiandao/score-user-search/score-user-search" hover-class="none">{{$t('fengcheche.qiandao.gotosend')}}</button>
		</view>
    </view>
</template>

<script>
import componentNoData from "@/components/no-data/no-data";
import componentBottomLine from "@/components/bottom-line/bottom-line";

const app = getApp();
var common_static_url = app.globalData.get_static_url('common');
export default {
    components: {
        componentNoData,
        componentBottomLine
    },
    data() {
        return {
			common_static_url:common_static_url,
            data_list: [],
            data_page_total: 0,
            data_page: 1,
            data_list_loding_status: 1,
            data_bottom_line_status: false,
            params: null,
            input_keyword_value: '',
            load_status: 0,

            nav_status_list: [
                {
                    name: this.$t('fengcheche.qiandao.fromme'),
                    value: '0'
                },
                {
                    name: this.$t('fengcheche.qiandao.tome'),
                    value: '1'
                }
            ],

            nav_status_index: 0,
            data_total: '',

            data_list_loding_msg: ''
        };
    },
    onLoad(params) {
        // 是否指定状态
        var nav_status_index = 0;

        if ((params.status || null) != null) {
            for (var i in this.nav_status_list) {
                if (this.nav_status_list[i]['value'] == params.status) {
                    nav_status_index = i;
                    break;
                }
            }
        }

        this.setData({
            params: params,
            nav_status_index: nav_status_index
        });
    },
    onShow() {
		app.globalData.page_event_onshow_handle();
        this.init();
    },
    // 下拉刷新
    onPullDownRefresh() {
        this.setData({
            data_page: 1
        });
        this.get_data_list(1);
    },
    methods: {
        init() {
            var user = app.globalData.get_user_info(this, 'init');

            if (user != false) {
                // 获取数据
				this.get_data_list();
            } else {
                this.setData({
                    data_list_loding_status: 0,
                    data_bottom_line_status: false
                });
            }
        },

        // 获取数据
        get_data_list(is_mandatory) {
            // 分页是否还有数据
            if ((is_mandatory || 0) == 0) {
                if (this.data_bottom_line_status == true) {
                    return false;
                }
            } 
			
			// 加载loding
            uni.showLoading({
                title: this.$t('common.loading_in_text'),
            });
            this.setData({
                data_list_loding_status: 1
            }); 
			
			// 参数
            var order_status = (this.nav_status_list[this.nav_status_index] || null) == null ? 0 : this.nav_status_list[this.nav_status_index]['value']; 
			
			// 获取数据
            uni.request({
                url: app.globalData.get_request_url('scorelist', 'index', 'qiandao'),
                method: 'POST',
                data: {
                    page: this.data_page,
                    keywords: this.input_keyword_value || '',
                    status: order_status
                },
                dataType: 'json',
                success: (res) => {
                    uni.hideLoading();
                    uni.stopPullDownRefresh();console.log(res);

                    if (res.data.code == 0) {
                        if (res.data.data.data.length > 0) {
                            if (this.data_page <= 1) {
                                var temp_data_list = res.data.data.data; 
                            } else {
                                var temp_data_list = this.data_list;
                                var temp_data = res.data.data.data;

                                for (var i in temp_data) {
                                    temp_data_list.push(temp_data[i]);
                                }
                            }

                            this.setData({
                                data_list: temp_data_list,
                                data_total: res.data.data.total,
                                data_page_total: res.data.data.page_total,
                                data_list_loding_status: 3,
                                data_page: this.data_page + 1,
                                load_status: 1,
                            }); 
							
							// 是否还有数据
                            if (this.data_page > 1 && this.data_page > this.data_page_total) {
                                this.setData({
                                    data_bottom_line_status: true
                                });
                            } else {
                                this.setData({
                                    data_bottom_line_status: false
                                });
                            }
                        } else {
                            this.setData({
                                data_list_loding_status: 0,
                                load_status: 1,
                                data_list: [],
                                data_bottom_line_status: false
                            });
                        }
                    } else {
                        this.setData({
                            data_list_loding_status: 0,
                            load_status: 1
                        });

                        if (app.globalData.is_login_check(res.data, this, 'get_data_list')) {
                            app.globalData.showToast(res.data.msg);
                        }
                    }
                },
                fail: () => {
                    uni.hideLoading();
                    uni.stopPullDownRefresh();
                    this.setData({
                        data_list_loding_status: 2,
                        load_status: 1
                    });
                    app.globalData.showToast(this.$t('common.internet_error_tips'));
                }
            });
        },

        // 滚动加载
        scroll_lower(e) {
            this.get_data_list();
        },

        // 导航事件
        nav_event(e) {
            this.setData({
                nav_status_index: e.currentTarget.dataset.index || 0,
                data_page: 1
            });
            this.get_data_list(1);
        },

        // url事件
        url_event(e) {
            app.globalData.url_event(e);
        }
    }
};
</script>
<style>
@import './score.css';
</style>
